<template>
  <div v-if="!isPageLoading" class="box">
    <t-overlay
      :visible="isBrightnessOverlayShow"
      :close-on-click-overlay="false"
      :style="{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100vw',
        height: '100vh',
        background: '#000', // 纯黑背景，亮度控制核心
        opacity: brightnessOverlayOpacity, // 强制绑定透明度变量
        pointerEvents: 'none', // 不拦截点击
        zIndex: 99, // 低于弹窗层级
        transition: 'opacity 0.3s ease', // 新增过渡，亮度变化更流畅
      }"
    />
    <t-sticky>
      <t-navbar :fixed="false" left-arrow @left-click="handleBack">
        <template #left>
          <div class="location">
            <span class="name">{{ courseDetName }}</span>
            <span>{{ courseDetIndex }}</span
            >/<span>{{ courseDetList.length }}页</span>
          </div>
        </template>
        <template #right>
          <div class="men-btn" @click="getMenuShow">
            <t-icon name="view-list" size="12px" />
            <span>菜单</span>
          </div>
        </template>
      </t-navbar>
    </t-sticky>
    <div v-show="modeType == 2">
      <t-swiper
        ref="swiperRef"
        v-model:current="activeIndex"
        :navigation="{ type: 'dots', showDots: false }"
        :autoplay="false"
        :loop="false"
        @click="handleClick"
        @change="handleChange"
        v-if="courseDetList.length > 0"
      >
        <t-swiper-item
          v-for="(item, index) in courseDetList"
          :key="index"
          style="
            height: 150vw;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <!-- 新增图片容器，用于定位加载动画 -->
          <div class="img-wrapper" @click="(e) => handleImgClick(e, index)">
            <t-image class="target-image" :src="item">
              <template #loading>
                <div class="loading-container">
                  <t-image
                    class="image-container"
                    :style="{ width: '30px', height: '32px' }"
                    fit="fill"
                    :src="loading"
                  ></t-image>
                </div>
              </template>
              <template #error>
                <div class="loading-container">
                  <t-image
                    class="image-container"
                    :style="{ width: '90px', height: '107px' }"
                    fit="fill"
                    :src="error"
                  ></t-image>
                  <p style="font-size: 12px; color: #606166; margin-top: 6px">
                    加载失败
                  </p>
                </div>
              </template>
            </t-image>
            <div class="watermark">
              <t-image :src="wm" :style="{ width: '100px', height: '40px' }">
              </t-image>
            </div>
          </div>
        </t-swiper-item>
      </t-swiper>
    </div>
    <div v-show="modeType == 1" class="vertical-box" ref="verticalBox">
      <div
        v-for="(item, index) in courseDetList"
        :key="index"
        class="vertical-img"
      >
        <div class="img-wrapper" @click="handleVerticalImgClick(index)">
          <t-image class="target-image-vertical" :src="item">
            <template #loading>
              <div class="loading-container">
                <t-image
                  class="image-container"
                  :style="{ width: '30px', height: '32px' }"
                  fit="fill"
                  :src="loading"
                ></t-image>
              </div>
            </template>
            <template #error>
              <div class="loading-container">
                <t-image
                  class="image-container"
                  :style="{ width: '90px', height: '107px' }"
                  fit="fill"
                  :src="error"
                ></t-image>
                <p style="font-size: 12px; color: #606166; margin-top: 6px">
                  加载失败
                </p>
              </div>
            </template>
          </t-image>
          <div class="watermark">
            <t-image :src="wm" :style="{ width: '100px', height: '40px' }">
            </t-image>
          </div>
        </div>
      </div>
    </div>

    <!-- <DownloadApk :isShowDialog.sync="isShowDialog"  /> -->
    <t-popup
      v-model="visible"
      placement="bottom"
      destroy-on-close
      style="
        padding: 50px 30px;
        padding-bottom: 30px;
        border: 1px solid #f1f1f1;
        border-top-right-radius: 24px;
        border-top-left-radius: 24px;
      "
      :showOverlay="false"
    >
      <div class="control-box">
        <!-- <t-icon name="less-than-or-equal" /> -->
        <t-image
          :src="next"
          :class="['up', Number(pageRecord.index) == 0 && 'disable']"
          @click="nextOrUp('prev')"
          :style="{ width: '16px', height: '24px' }"
        ></t-image>
        <t-slider
          v-model="courseDetIndex"
          :max="courseDetList.length"
          @change="sliderChange"
          style="
            width: 90%;
            --td-slider-bar-height: 4px;
            --td-slider-bar-active-bg: #f1b444; /* 激活态轨道颜色 */
            --td-slider-bar-bg: #e5e6eb; /* 未激活态轨道颜色 */
            --td-slider-bar-width: 6px;
            --td-slider-capsule-bar-width: 90%;
          "
          min="1"
        />

        <t-image
          :src="next"
          :class="[
            'next',
            Number(pageRecord.index) >= recordList.length - 1 && 'disable',
          ]"
          @click="nextOrUp('next')"
          :style="{ width: '16px', height: '24px' }"
        ></t-image>
      </div>
      <div class="control-box1">
        <div class="menu" @click="getShowMenu">
          <!-- <t-icon name="catalog" size="25px"/> -->
          <t-image
            :src="menu1"
            :style="{ width: '23px', height: '23px' }"
          ></t-image>
          <p>目录</p>
        </div>
        <div class="menu" @click="getReadSet">
          <!-- <t-icon name="setting" size="25px"/> -->
          <t-image
            :src="read"
            :style="{ width: '23px', height: '23px' }"
          ></t-image>
          <p>阅读设置</p>
        </div>
      </div>
    </t-popup>
    <t-popup
      v-model="menuShow"
      placement="bottom"
      destroy-on-close
      :showOverlay="true"
      style="
        padding: 30px 15px;
        padding-top: 20px;
        min-height: 240px;
        border: 1px solid #f1f1f1;
        border-top-right-radius: 24px;
        border-top-left-radius: 24px;
      "
    >
      <h4 class="menu-title">目录</h4>
      <div class="chapter-list">
        <span
          v-for="(item, index) in recordList"
          :key="index"
          @click="clickCourseItem(index)"
          :class="[
            getClassName(item.courseDetailsName),
            { 'text-active': pageRecord.index === index },
          ]"
        >
          {{ item.courseDetailsName }}</span
        >
      </div>
    </t-popup>
    <t-popup
      v-model="readSet"
      placement="bottom"
      destroy-on-close
      :showOverlay="false"
      style="
        padding: 30px 15px;
        padding-top: 20px;
        min-height: 240px;
        border: 1px solid #f1f1f1;
        border-top-right-radius: 24px;
        border-top-left-radius: 24px;
      "
    >
      <h4 class="menu-title">设置</h4>
      <div class="brightness-control">
        <!-- 修复：确保 v-model 绑定的是 brightnessOverlayOpacity，且 step 正确 -->
        <span style="font-size: 14px; display: inline-block; margin-right: 4px"
          >亮度</span
        >
        <t-image
          :src="sun"
          :style="{ width: '23px', height: '23px', margin: '0 5px' }"
        ></t-image>
        <t-slider
          v-model="brightnessOverlayOpacity"
          :min="0"
          :max="0.8"
          :step="0.05"
          style="
            width: 75%; // 新增：确保滑块占满容器，避免点击区域过小
            --td-slider-bar-active-bg: #f1b444;
            --td-slider-bar-bg: #e5e6eb;
            --td-slider-bar-height: 4px;
            --td-slider-bar-width: 6px;
            --td-slider-capsule-bar-width: 70%;
          "
        />
        <t-image
          :src="moon"
          :style="{ width: '19px', height: '23px', margin: '0 5px' }"
        ></t-image>
      </div>
      <div class="turn-control">
        <span style="font-size: 14px; display: inline-block; margin-right: 4px"
          >翻页设置</span
        >
        <div class="turn-list">
          <div
            class="turn"
            :class="{ active: modeType == 2 }"
            @click="switchMode(2)"
          >
            <t-icon
              name="arrow-down-rectangle"
              size="24px"
              style="transform: rotate(-90deg)"
            ></t-icon>
            <span>国漫翻页</span>
          </div>
          <div
            class="turn"
            :class="{ active: modeType == 1 }"
            @click="switchMode(1)"
          >
            <t-icon name="arrow-down-rectangle" size="24px"></t-icon>
            <span>滚动翻页</span>
          </div>
        </div>
      </div>
    </t-popup>
    <!-- <t-overlay :visible="true"  /> -->
    <!-- <t-overlay :visible="true"  :close-on-click-overlay="false"  /> -->
  </div>
  <div v-else>
    <PageLoading :is-loading="isPageLoading"></PageLoading>
  </div>
</template>

<script setup>
// 脚本部分完全不变，省略...
import { onMounted, ref, nextTick, watch, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getCourseDet, getChapter } from "@/api/index.js";
import { getReadRecord, saveReadRecord, clearReadRecord } from "@/utils/utils";
import { Toast } from "tdesign-mobile-vue";
import PageLoading from "@/components/PageLoading.vue";
import menu1 from "@/assets/comic/menu1.png";
import read from "@/assets/comic/menu5.png";
import next from "@/assets/comic/next.png";
import moon from "@/assets/comic/moon.png";
import sun from "@/assets/comic/sun.png";
import wm from "@/assets/wm.png";
import comicApi from "@/api/comicApi.js";
import loading from "@/assets/loading.gif";
import error from "@/assets/error.png";
import { ossImageToBase64 } from "@/utils/ossImageToBase64.js";
// import prev from '@/assets/comic/next.png';
let readInfo = {};
let timer = null;
const route = useRoute();
const router = useRouter();
const courseDetList = ref([]);
const imgDetList = ref([]);
const recordList = ref([]);
const courseDetIndex = ref(1);
const activeIndex = ref(0);
const courseDetName = ref("");
const isShowDialog = ref(false);
const visible = ref(false); //点击图片中间显示
const menuShow = ref(false); //显示目录
const readSet = ref(false); //显示阅读设置
const isPageLoading = ref(true);
const swiperRef = ref(null);
const brightnessOverlayOpacity = ref(0); // 初始透明度0（最亮，避免全黑）
const isBrightnessOverlayShow = ref(true); // 初始显示遮罩（否则滑块调节无效果）
const modeType = ref(2);
const scrollTimer = ref(null);
const pageRecord = ref({
  courseId: "", //漫画id
  index: 0, // 当前章节的下标
  pageIndex: 1, //当前漫画图片的位置
  courseDetailsId: "",
});

// 滑动切换上下翻页
const handleChange = (index, context) => {
  visible.value = false;
  menuShow.value = false;
  readSet.value = false;
  courseDetIndex.value = Number(index) + 1;
  activeIndex.value = index;
  pageRecord.value.pageIndex = courseDetIndex.value;
};
const courseId = Number(route.params.id);
const handleClick = (value) => {
  console.log("click: ", value);
};

//处理txt图片文件
const handleCourseImageList = async (imageUrlList = [], mimeType = "webp") => {
  // 防御：处理空数组或非数组
  if (!Array.isArray(imageUrlList) || imageUrlList.length === 0) {
    // console.warn('[课程图片处理] 无效的图片 URL 列表：', imageUrlList);
    return [];
  }
  try {
    // 调用统一工具，批量转换图片（支持单张/多张）
    const result = await ossImageToBase64(imageUrlList, {
      mimeType,
    });

    // 提取处理后的图片地址（按原始顺序返回）
    const processedUrls = result.list.map((item) => {
      if (item.success) {
        return item.data; // 成功：返回 Base64
      } else {
        return item.data; // 失败：返回代理 URL 兜底
      }
    });
    return processedUrls;
  } catch (err) {
    // 极端异常时，直接返回原始 URL 数组（最大程度兜底）
    return imageUrlList;
  }
};

const initScrollListener = () => {
  // 先销毁旧监听（避免重复绑定）
  unregisterScrollListener();
  // 仅竖屏模式注册监听
  if (modeType.value === 1) {
    window.addEventListener("scroll", handleScroll);
    // 初始化时立即执行一次，同步当前可视图片的页码
    handleScroll();
  }
};

//获取漫画图片
const getCourse = async () => {
  try {
    const parms = {
      id: courseId,
      page: 1,
      limit: 2000,
      orderType: "asc",
      includeUrl: true,
    };
    const res = await getChapter(parms);
    recordList.value = res.data?.records;
    const courseIndex = recordList.value.findIndex((item) => {
      const itemId = String(item.courseDetailsId);
      const targetId =
        String(pageRecord.value.courseDetailsId) ||
        String(recordList.value[0].courseDetailsId);
      return itemId === targetId;
    });
    pageRecord.value.index = courseIndex;
    pageRecord.value.courseDetailsId = pageRecord.value.courseDetailsId
      ? pageRecord.value.courseDetailsId
      : recordList.value[0].courseDetailsId;
    imgDetList.value = res.data?.records[courseIndex].videoUrl.split(",");
    courseDetList.value = await handleCourseImageList(imgDetList.value);
    courseDetName.value = res.data?.records[courseIndex].courseDetailsName;
    isPageLoading.value = false;
    // 关键修改1：用 setTimeout 替代单纯的 nextTick，给组件初始化留时间
    setTimeout(() => {
      nextTick(() => {
        activeIndex.value = 0;
        // 数据加载完成+DOM渲染后，立即初始化滚动监听（解决初次进入不更新问题）
        initScrollListener();
        // 同时滚动到初始页码对应的图片
        scrollToVerticalImg(pageRecord.value.pageIndex - 1);
      });
    }, 300); // 300ms 足够 t-swiper 初始化 proxy
  } catch (error) {
    isPageLoading.value = false;
    // console.error('数据获取失败', error);
  }
};

//点击图片不同区域触发不同事件
const handleImgClick = (e, currentIdx) => {
  if (readSet.value) {
    readSet.value = false;
  }
  e.stopPropagation();
  const swiperInstance = swiperRef.value;
  const listLength = courseDetList.value.length;
  // const swiper = swiperInstance.proxy;
  const imgWrapper = e.currentTarget;
  const wrapperWidth = imgWrapper.offsetWidth;
  const clickX = e.clientX - imgWrapper.getBoundingClientRect().left;
  const leftEnd = wrapperWidth * 0.3;
  const rightStart = wrapperWidth * 0.7;

  // 左击：上一页（边界判断：不是第一页）
  if (currentIdx == 0) {
    currentIdx = 1;
  }
  if (clickX < leftEnd && currentIdx > 0) {
    activeIndex.value = currentIdx - 1; // 直接改索引，轮播自动切换
    // saveReadRecord(pageRecord.value);
  }
  // 右击：下一页（边界判断：不是最后一页）
  else if (clickX > rightStart && currentIdx < listLength - 1) {
    activeIndex.value = currentIdx + 1; // 直接改索引，轮播自动切换（核心！）
    // saveReadRecord(pageRecord.value);
  }
  // 中击：显示底部弹窗
  else {
    // console.log(readSet.value)

    visible.value = !visible.value;
    menuShow.value = false;
  }
};

//竖屏点击图片
const handleVerticalImgClick = (index) => {
  if (readSet.value) {
    readSet.value = false;
  } else {
    visible.value = !visible.value;
    menuShow.value = false;
  }
};

//顶部点击显示菜单
const getMenuShow = () => {
  visible.value = !visible.value;
  menuShow.value = false;
  readSet.value = false;
};

//返回上一页
const handleBack = () => {
  router.back();
};

//滑动滑块

const sliderChange = (e) => {
  // 1. 计算目标图片索引（页码e转索引：页码1→索引0，正确逻辑保留）
  const targetIndex = e - 1;
  // 2. 同步更新页码相关变量（确保数据一致）
  courseDetIndex.value = e;
  pageRecord.value.pageIndex = e;
  // saveReadRecord(pageRecord.value); // 可选：保存阅读记录

  // 3. 关键修复：竖屏模式优先执行滚动逻辑
  if (modeType.value === 1) {
    // 新增：等待DOM更新（确保vertical-img元素已渲染，避免找不到元素）
    nextTick(() => {
      scrollToVerticalImg(targetIndex); // 传入正确的目标索引
    });
  } else {
    // 横屏模式保持原有逻辑（不变）
    activeIndex.value = targetIndex;
    if (swiperRef.value?.proxy) {
      swiperRef.value.proxy.slideTo(targetIndex, 0); // 横屏轮播切换
    }
  }
};

// 判断当前可视区域内的图片索引（核心逻辑）
const getCurrentVisibleImgIndex = () => {
  // 获取所有竖屏图片容器
  const imgElements = document.querySelectorAll(".vertical-img");
  if (imgElements.length === 0) return 0; // 无图片时返回默认索引

  let currentIndex = 0;
  const viewportHeight = window.innerHeight; // 可视区域高度
  const offsetRatio = 0.3; // 可视比例阈值：图片顶部进入可视区域30%即判定为当前图片（可调整）

  imgElements.forEach((el, index) => {
    const rect = el.getBoundingClientRect(); // 获取图片容器的位置信息
    // 图片顶部进入可视区域30% 或 图片底部进入可视区域（避免最后一张图片无法触发）
    const isVisible =
      rect.top <= viewportHeight * offsetRatio && rect.bottom >= 0;
    if (isVisible) {
      currentIndex = index;
    }
  });
  return currentIndex;
};

//切换横竖屏模式（同步加载状态）
const switchMode = (mode) => {
  modeType.value = mode;
  localStorage.setItem("modeType", mode); // 保存模式到本地存储
  nextTick(() => {
    initScrollListener(); // 模式切换时重新初始化监听
    if (mode === 1) {
      scrollToVerticalImg(pageRecord.value.pageIndex - 1);
    }
  });
};

// 滚动事件处理函数（防抖处理，避免频繁计算）
const handleScroll = (num) => {
  // 防抖：30ms内只执行一次，减少性能消耗
  clearTimeout(scrollTimer.value);
  scrollTimer.value = setTimeout(() => {
    if (modeType.value !== 1) return; // 非竖屏模式不处理

    const visibleIndex = getCurrentVisibleImgIndex(); // 获取当前可视图片索引
    const targetPage = visibleIndex + 1; // 索引转页码（索引0→页码1）
    // 同步更新所有关联变量（确保滑块、页码、阅读记录一致）
    if (courseDetIndex.value !== targetPage) {
      courseDetIndex.value = targetPage;
      pageRecord.value.pageIndex = targetPage;
      activeIndex.value = visibleIndex; // 同步轮播索引（避免滑块与图片错位）
      console.log("滚动更新courseDetIndex:", courseDetIndex.value); // 调试用，可删除
    }
  }, 30);
};

// 注册滚动监听（仅在竖屏模式下）
const registerScrollListener = () => {
  if (modeType.value === 1) {
    window.addEventListener("scroll", handleScroll); // 绑定滚动事件
  }
};

// 销毁滚动监听（避免内存泄漏）
const unregisterScrollListener = () => {
  window.removeEventListener("scroll", handleScroll);
  clearTimeout(scrollTimer.value); // 清除防抖计时器
};

//根据章节名字长度显示不同的class
const getClassName = (name) => {
  if (name.length <= 5) return "short-name";
  if (name.length <= 9) return "medium-name";
  if (name.length <= 14) return "md-name1";
  if (name.length <= 20) return "md-name";
  return "long-name";
};

// 获取竖屏模式下目标图片的DOM元素（根据索引）
const getVerticalImgElement = (index) => {
  // 竖屏图片容器类为 .vertical-img，通过索引获取对应DOM
  const imgElements = document.querySelectorAll(".vertical-img");
  // 边界判断：避免索引超出范围
  if (imgElements.length === 0 || index < 0 || index >= imgElements.length) {
    return null;
  }
  return imgElements[index];
};

const scrollToVerticalImg = (targetIndex) => {
  // 1. 修复：获取竖屏图片容器（原代码正确，补充存在性检查）
  const imgElements = document.querySelectorAll(".vertical-img");
  if (imgElements.length === 0) {
    console.warn("竖屏图片容器不存在，无法滚动");
    return; // 无元素时直接返回，避免报错
  }

  // 2. 修复：边界值处理（避免索引超出范围）
  const safeIndex = Math.max(0, Math.min(targetIndex, imgElements.length - 1));
  const targetImg = imgElements[safeIndex];
  if (!targetImg) {
    console.warn(`目标图片索引${safeIndex}不存在，无法滚动`);
    return;
  }

  // 3. 核心滚动逻辑（原代码正确，补充平滑滚动）
  const targetTop = targetImg.getBoundingClientRect().top + window.scrollY;
  window.scrollTo({
    top: targetTop - 10, // 减10px：避免图片紧贴顶部，优化视觉
    behavior: "smooth", // 平滑滚动（用户体验更好，可保留）
  });

  // 可选：滚动后隐藏加载动画（若之前加过滚动加载动画）
  // isScrollLoading.value = false;
};

//竖屏模式下初始化时，滚动到当前索引图片（可选，优化体验）
const initVerticalScroll = () => {
  // 页面加载完成且为竖屏模式时，滚动到初始索引（如 pageRecord.pageIndex 对应的图片）
  if (modeType.value === 1 && courseDetList.value.length > 0) {
    const initIndex = pageRecord.value.pageIndex - 1; // 转成0开始的索引
    // 延迟执行，确保图片DOM已渲染
    setTimeout(() => {
      scrollToVerticalImg(initIndex);
    }, 300);
  }
};

//点击显示目录
const getShowMenu = () => {
  menuShow.value = true;
};

// 点击章节切换时，同步更新滚动监听（避免切换章节后监听失效）
const clickCourseItem = (index) => {
  courseDetName.value = recordList.value?.[index]?.courseDetailsName;
  pageRecord.value.index = index;
  pageRecord.value.pageIndex = 1; // 重置为章节第一页
  const data = recordList.value?.[index]?.videoUrl.split(",");
  courseDetList.value = data;

  // 章节切换后，若为竖屏模式：重新注册监听+滚动到第一页
  nextTick(() => {
    if (modeType.value === 1) {
      unregisterScrollListener(); // 先销毁旧监听
      registerScrollListener(); // 重新注册新监听（避免DOM变化导致监听失效）
      scrollToVerticalImg(0); // 滚动到章节第一页（索引0）
    }
  });
};

// 修复2：阅读设置弹窗打开逻辑 - 确保遮罩始终显示
const getReadSet = () => {
  readSet.value = true;
  visible.value = false;
  menuShow.value = false;
  isBrightnessOverlayShow.value = true; // 强制显示遮罩，避免调节时无效果
};

// 修复3：恢复默认亮度 - 确保透明度重置为0
const resetBrightness = () => {
  brightnessOverlayOpacity.value = 0; // 重置为最亮
};

// 上一章、下一章
const nextOrUp = async (type) => {
  try {
    if (type === "next") {
      const index = Number(pageRecord.value.index) + 1;
      if (index <= recordList.value.length - 1) {
        const courseDetailsId = recordList.value?.[index].courseDetailsId;
        const result = await comicApi.checkReadLimit(courseDetailsId);

        if (result.code === 0) {
          // 原有逻辑：更新章节名称、记录索引
          courseDetName.value = recordList.value?.[index]?.courseDetailsName;
          pageRecord.value.index = index;
          pageRecord.value.courseDetailsId = courseDetailsId;
          courseDetList.value = []; // 清空旧图片

          await new Promise((resolve) => setTimeout(resolve, 100)); // 等待swiper感知清空

          // 加载新章节图片
          imgDetList.value = recordList.value?.[index]?.videoUrl.split(",");
          courseDetList.value = await handleCourseImageList(imgDetList.value);

          // 新增2：章节切换成功后，强制同步滑块的当前值和最大值
          await nextTick(); // 等待DOM更新（确保courseDetList.length已变为新值）
          courseDetIndex.value = 1; // 重置页码为1
          pageRecord.value.pageIndex = 1; // 修复原代码pageIndex=0的错误（页码从1开始）

          // 原有逻辑：更新轮播索引
          nextTick(() => {
            setTimeout(() => {
              activeIndex.value = 0; // 轮播索引从0开始（对应页码1）
              if (swiperRef.value?.proxy) {
                swiperRef.value.proxy.slideTo(0, 0);
              }
              // 新增3：轮播更新后，再次确认滑块值（避免异步延迟导致的偏差）
              courseDetIndex.value = 1;
            }, 100);
          });
        } else {
          // 新增4：无权限时，隐藏加载动画+提示
          isChapterLoading.value = false;
          isScrollLoading.value = false;
          Toast({ duration: 2000, message: result.msg });
        }
      } else {
        // 新增5：已到最后一章，隐藏加载动画+提示（可选）
        isChapterLoading.value = false;
        isScrollLoading.value = false;
        Toast({ duration: 1500, message: "已到最后一章" });
      }
    }

    if (type === "prev") {
      const index = Number(pageRecord.value.index) - 1;
      if (index >= 0) {
        const courseDetailsId = recordList.value?.[index].courseDetailsId;
        const result = await comicApi.checkReadLimit(courseDetailsId);

        if (result.code === 0) {
          // 原有逻辑：更新章节名称、记录索引
          courseDetName.value = recordList.value?.[index]?.courseDetailsName;
          pageRecord.value.index = index;
          pageRecord.value.courseDetailsId = courseDetailsId;
          courseDetList.value = []; // 清空旧图片

          await new Promise((resolve) => setTimeout(resolve, 100)); // 等待swiper感知清空

          // 加载新章节图片
          imgDetList.value = recordList.value?.[index]?.videoUrl.split(",");
          courseDetList.value = await handleCourseImageList(imgDetList.value);

          // 新增6：同next逻辑，同步滑块值
          await nextTick();
          courseDetIndex.value = 1; // 重置页码为1
          pageRecord.value.pageIndex = 1; // 修复原代码pageIndex=0的错误

          // 原有逻辑：更新轮播索引
          nextTick(() => {
            setTimeout(() => {
              activeIndex.value = 0;
              if (swiperRef.value?.proxy) {
                swiperRef.value.proxy.slideTo(0, 0);
              }
              // 新增7：确认滑块值
              courseDetIndex.value = 1;
            }, 100);
          });
        } else {
          // 新增8：无权限时，隐藏加载动画+提示
          isChapterLoading.value = false;
          isScrollLoading.value = false;
          Toast({ duration: 2000, message: result.msg });
        }
      } else {
        // 新增9：已到第一章，隐藏加载动画+提示（可选）
        isChapterLoading.value = false;
        isScrollLoading.value = false;
        Toast({ duration: 1500, message: "已到第一章" });
      }
    }
  } catch (error) {
    // 新增10：捕获异常，隐藏加载动画（避免卡住）
    // isChapterLoading.value = false;
    // isScrollLoading.value = false;
    console.error("章节切换失败：", error);
    Toast({ duration: 2000, message: "章节切换失败，请重试" });
  }
};
// 保存用户阅读历史
function saveHistory() {
  comicApi.insertCourseCollect({
    courseId: courseId,
    type: 1,
    classify: 3,
    courseDetailsId: pageRecord.value.courseDetailsId,
    coursePage: courseDetIndex.value,
    courseDetailTitle: courseDetName.value,
  });
}
// 新增：调试用 - 查看变量变化（可选，修复后可删除）
watch(brightnessOverlayOpacity, (newVal) => {});
// 6. 监听 modeType 变化（若有切换横竖屏的场景，可选）
watch(
  modeType,
  (newMode, oldMode) => {
    if (newMode === 1) {
      // 切换到竖屏：注册监听+初始滚动定位
      registerScrollListener();
      const currentIndex = pageRecord.value.pageIndex - 1;
      scrollToVerticalImg(currentIndex);
    } else {
      // 切换到非竖屏：销毁监听
      unregisterScrollListener();
    }
  },
  { immediate: true }
); // immediate: true → 初始化时执行一次（确保初始模式正确绑定）

watch(courseDetIndex, (newVal, oldVal) => {
  saveReadRecord({
    courseId: courseId,
    index: pageRecord.value.index,
    pageIndex: newVal,
    courseDetailsId: pageRecord.value.courseDetailsId,
  });
});
onMounted(() => {
  saveHistory();
  timer = setInterval(() => {
    saveHistory();
  }, 10000);
  readInfo = getReadRecord(courseId);
  if (readInfo.courseDetailsId) {
    courseDetIndex.value = readInfo.pageIndex;
    pageRecord.value.courseDetailsId = readInfo.courseDetailsId;
    pageRecord.value.pageIndex = readInfo.pageIndex;
  } else {
    courseDetIndex.value = 1;
  }

  // 先从本地存储读取modeType，确保初始模式正确
  const storedMode = localStorage.getItem("modeType");
  // 修复：处理本地存储异常值（如null/3等，统一默认竖屏）
  if (storedMode === null || storedMode === "3") {
    modeType.value = 1; // 初次进入默认竖屏
    localStorage.setItem("modeType", "1"); // 同步到本地存储
  } else {
    modeType.value = Number(storedMode);
  }
  // 加载数据
  getCourse();
  // 额外保障：DOM完成后再次确认监听（避免极端情况下初始化失败）
  nextTick(() => {
    setTimeout(initScrollListener, 500);
  });
});

// 组件卸载时销毁滚动监听（避免内存泄漏）
onUnmounted(() => {
  courseDetIndex.value = 1;
  unregisterScrollListener();
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style scoped lang="scss">
// 原有样式保留，新增以下样式
.img-wrapper {
  width: 100%;
  height: 100%;
  position: relative; // 作为加载动画的定位容器
  display: flex;
  align-items: center;
  justify-content: center;
}

.target-image {
  width: 100%;
  height: 100%;
  object-fit: contain; // 保持图片比例
}

.loading-container {
  position: absolute; // 绝对定位
  top: 50%; // 垂直居中
  left: 50%; // 水平居中
  transform: translate(-50%, -50%); // 精确居中
  z-index: 10; // 确保在图片上方显示
}

// 以下为原有样式，保持不变
img {
  display: block;
  width: 100%;
}

.t-swiper-nav__dots {
  display: none !important;
}

.t-swiper-item {
  height: 150vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.location {
  span {
    font-size: 14px;
    color: #303133;
    display: inline-block;
    margin: 0 3px;
  }
}

.control-box {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .up {
    display: inline-block;
    transform: rotate(180deg);
  }

  .next {
    display: inline-block;
  }

  .disable {
    opacity: 0.3;
  }
}

.control-box1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;

  .menu {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    p {
      margin: 3px 0;
      color: #909199;
      font-size: 14px;
    }
  }
}

.chapter-list {
  display: flex;
  // align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 24px;
  gap: 10px; // 标签之间的间距（水平+垂直）
  overflow-x: hidden;
  overflow-y: scroll;
  max-height: 600px;

  // padding-right: 15px;
  span {
    display: block;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(187, 187, 187, 1);
  }

  .text-active {
    border-color: #f1b444 !important;
    background: rgba(241, 180, 68, 0.15) !important;
    color: #f1b444 !important;
  }

  .short-name {
    width: calc(25% - 13px);
  }

  .medium-name {
    width: calc(33.3% - 13px);
  }

  .md-name1 {
    width: calc(50% - 13px);
  }

  .md-name {
    width: calc(75% - 13px);
  }

  .long-name {
    width: calc(100% - 13px);
  }
}

.menu-title {
  margin: 10px 0;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

.zhe {
  width: 100vw;
  height: 100vh;
  // display: inline-block;
  position: fixed;
  z-index: 888;
  background: #303133;
  opacity: 0.1;
}

// 新增：亮度控制模块样式
.brightness-control {
  margin-top: 40px;
  // margin-bottom: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  span {
    font-size: 14px;
    display: inline-block;
    margin-right: 4px;
  }
}

.brightness-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #303133;
}

.brightness-value {
  color: #f1b444;
  font-weight: 500;
}
.turn-control {
  margin-top: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .turn-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .turn {
      width: 62px;
      height: 46px;
      border: 1px solid #b4b4b4;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-left: 20px;
      color: #b4b4b4;
      span {
        font-size: 12px;
        margin-top: 1px;
      }
    }
    .active {
      border-color: #f1b444 !important;
      color: #f1b444 !important;
    }
  }
}
.watermark {
  position: absolute;
  bottom: 0;
  right: 0;
}
.vertical-box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}
// 1. 确保竖屏容器占满页面宽度，避免图片偏移
.vertical-box {
  display: flex;
  flex-direction: column;
  width: 100vw; // 占满屏幕宽度
  overflow-x: hidden; // 隐藏横向滚动条
}

// 2. 确保每张图片独立占据容器，避免高度塌陷
.vertical-img {
  padding: 4px;
  border: 1px solid #f1f1f1;
  border-bottom: 0;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 3. 确保图片在容器内正确显示，避免滚动目标位置偏差
.vertical-img .target-image {
  width: 100%;
  height: auto; // 保持图片比例，避免拉伸
  object-fit: contain;
}

// 4. 移除竖屏模式下可能影响滚动的固定定位元素（若有）
@media (max-width: 768px) {
  // 适配移动端竖屏
  .vertical-box {
    // padding-top: 44px; // 若导航栏固定，需预留顶部距离（根据实际导航栏高度调整）
  }
}
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.8); // 半透明白色背景，遮挡内容
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999; // 层级高于所有内容，确保可见
}
.men-btn {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.1);
  color: #6c6c6c;
  span {
    display: inline-block;
    margin: 0 2px;
  }
  .t-icon-view-list {
    position: relative;
    top: -1px;
  }
}
.target-image-vertical {
  min-height: 60vh;
}
</style>
